<template>
  <div class="virtual-file-grid" ref="containerRef">
    <!-- TanStack Vue Virtual 高性能网格虚拟滚动 -->
    <div
      ref="scrollElementRef"
      class="virtual-grid-container"
      :style="{
        height: `${containerHeight - 24}px`,
        overflow: 'auto',
      }"
    >
      <div
        :style="{
          height: `${virtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative',
        }"
      >
        <!-- 渲染虚拟行 -->
        <div
          v-for="virtualRow in virtualizer.getVirtualItems()"
          :key="String(virtualRow.key)"
          :style="{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: `${virtualRow.size}px`,
            transform: `translateY(${virtualRow.start}px)`,
          }"
          class="virtual-grid-row"
        >
          <!-- 每行的文件项 -->
          <div class="grid-row-content">
            <FileItem
              v-for="item in getRowItems(virtualRow.index)"
              :key="`${item.type}-${item.name}`"
              :item="item"
              class="grid-file-item"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useVirtualizer } from "@tanstack/vue-virtual";
import type { FileSystemItem } from "../types/fileSystem";
import FileItem from "./FileItem.vue";

interface Props {
  items: FileSystemItem[];
  containerHeight: number;
}

const props = defineProps<Props>();

// 容器引用
const containerRef = ref<HTMLElement>();
const scrollElementRef = ref<HTMLElement>();

// 网格配置
const ITEMS_PER_ROW = 6; // 每行显示的文件数量
const ROW_HEIGHT = 140; // 每行高度

// 计算总行数
const rowCount = computed(() => {
  return Math.ceil(props.items.length / ITEMS_PER_ROW);
});

// 创建虚拟滚动器
const virtualizer = useVirtualizer({
  count: rowCount.value,
  getScrollElement: () => scrollElementRef.value || null,
  estimateSize: () => ROW_HEIGHT,
  overscan: 5,
});

// 获取指定行的文件项
const getRowItems = (rowIndex: number): FileSystemItem[] => {
  const startIndex = rowIndex * ITEMS_PER_ROW;
  const endIndex = Math.min(startIndex + ITEMS_PER_ROW, props.items.length);
  return props.items.slice(startIndex, endIndex);
};

// 容器高度管理
const updateContainerHeight = () => {
  if (containerRef.value) {
    // 通知虚拟滚动器重新测量
    virtualizer.value.measure();
  }
};

// ResizeObserver for responsive layout
let resizeObserver: ResizeObserver | null = null;

onMounted(() => {
  if (containerRef.value) {
    resizeObserver = new ResizeObserver(updateContainerHeight);
    resizeObserver.observe(containerRef.value);
    updateContainerHeight();
  }
});

onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
});
</script>

<style scoped lang="scss">
.virtual-file-grid {
  height: 100%;
  width: 100%;
}

.virtual-grid-container {
  padding: 12px;
}

.virtual-grid-row {
  width: 100%;
}

.grid-row-content {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  height: 100%;
  align-items: start;
  padding: 8px 0;

  // 响应式网格
  @media (max-width: 1200px) {
    grid-template-columns: repeat(5, 1fr);
  }

  @media (max-width: 900px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  @media (max-width: 480px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.grid-file-item {
  min-height: 120px;
}
</style>
